<script setup lang="ts">
import navbar from "@/components/navbar/navbar.vue";
import { computed, ref } from "vue";
import { calculateAge, toast, router } from "@/utils/tools";
import goodsWaterfall from "../components/goods/goodsWaterfall.vue";
import { onLoad } from "@dcloudio/uni-app";
import { apiGetUserInfo, apiMySelf, apiUserLabel } from "@/apis/user";
import { reactive } from "vue";
import { apiShopInfo } from "@/apis/shop";
import { apiAddFollow } from "@/apis/my";
import { useUserStore } from "@/stores/user";
const userStore = useUserStore();

const storeDetail = reactive({});
const storeId = ref(0);
const userId = ref(0);
const getUserLabel = async () => {
  let res = await apiUserLabel();
  userLabel.value = res.data;
};

const getShopDetail = async () => {
  let res = await apiShopInfo({
    appUserId: storeId.value,
    userId: userId.value,
  });
  Object.assign(storeDetail, res.data);
};

onLoad((e: any) => {
  storeId.value = e.shopId ?? "";
  userId.value = e.userId ?? "";
  getShopDetail();
});

const isLoginChange = () => {
  if (!uni.getStorageSync("token")) {
    uni.navigateTo({
      url: "/pages/login/login",
    });
    return;
  }
};

// 关注
const handleFollow = async () => {
  isLoginChange();
  // 防抖
  uni.$uv.debounce(addFollow(), 500);
};
const addFollow = async () => {
  if (storeDetail.id == userStore.userInfo.id) {
    toast("不能关注自己！");
    return false;
  }

  let res = await apiAddFollow({
    appFollowId: storeDetail.id,
  });

  if (res.code == 200) {
    toast("关注成功！");
    getShopDetail();
  }
};
// 计算年龄
const age = computed(() => {
  return storeDetail.carId ? calculateAge(storeDetail.carId) + "岁" : "";
});
const sexImg = computed(() => {
  return storeDetail.sex == 0
    ? "@/static/images/sex1.png"
    : "@/static/images/sex2.png";
});

// 跳转店铺会员
const storeClick = () => {
  router(`/pagesMy/store/openStore`);
};
const personalVip = () => {
  router(`/pagesMy/member/grade-member`);
};
</script>

<template>
  <navbar title="商家" :fixed="navbarFixed" :back="true" />
  <view class="container">
    <view class="user">
      <view class="avatar flex flex-center">
        <!-- 头像 -->
        <image
          :src="
            storeDetail.headSculpture == ''
              ? '@/static/images/avatar_default.png'
              : storeDetail.headSculpture
          "
        />
      </view>
      <view class="user-right">
        <view class="user-info">
          <view class="nikename">
            <text>{{
              storeDetail.userName ? storeDetail.userName : "游客"
            }}</text>
            <view class="vip-lv">
              <view class="lvicon">
                <image src="@/static/images/viplv@2x.png"></image>
              </view>
              <view class="viplvtext">
                <view v-if="storeDetail?.shopVip === 0">LV0</view>
                <view v-if="storeDetail?.shopVip != 0">
                  <text>LV{{ storeDetail?.shopVip }}</text>
                  <text v-if="storeDetail?.vipType === 0" @tap="personalVip"
                    >个人</text
                  >
                  <text v-if="storeDetail?.vipType === 1" @tap="storeClick"
                    >店铺</text
                  >
                </view>
              </view>
            </view>
          </view>
          <view class="userinfo-feature">
            <button
              v-if="!storeDetail.follow"
              @click="handleFollow"
              class="follow"
            >
              关注
            </button>
          </view>
        </view>
        <view class="store flex flex-align-center">
          <uv-icon name="map-fill" color="#fff"></uv-icon>
          <text class="map-fills-text">{{ storeDetail.address }}</text>
        </view>
      </view>
    </view>
    <view class="personaldec">个性签名:{{ storeDetail.personalProfile }}</view>
    <view class="personaldec">已缴纳押金:{{ storeDetail.amount??0 }}</view>
    <view class="lines"></view>
    <view class="tag-wrap">
      <block v-if="storeDetail.labelType">
        <view
          class="tag-btn"
          v-for="(item, index) in storeDetail.labelType.split(',')"
          :key="index"
        >
          <text>{{ item }}</text>
        </view>
      </block>
    </view>

    <view class="main">
      <!-- <view class="main-top">
        <view class="feature">
          <navigator url="/pagesMy/focus/focus" open-type="navigate" hover-class="navigator-hover">
            <text class="number">{{ storeDetail.follows }}</text>
            <text>关注</text>
          </navigator>
        </view>
        <view class="feature">
          <navigator url="/pagesMy/fans/fans" open-type="navigate" hover-class="navigator-hover">
            <text class="number">{{ storeDetail.fans }}</text>
            <text>粉丝</text>
          </navigator>
        </view>
        <view class="feature">
          <text class="wordart">lv{{ storeDetail.shopVip }}</text>
          <text>店铺</text>
        </view>
      </view>
      <view class="signature">
        <text>个性签名：</text>
        <text>{{ storeDetail.personalProfile }}</text>
      </view>
      <view class="tags">
        <view class="tag" v-if="storeDetail.address">
          <text>{{ storeDetail.address }}</text>
        </view>
        <view class="tag" v-for="(item,index) in storeDetail.labelType.split(',')" :key="index">
          <text>{{ item }}</text>
        </view>
      </view>
      <uv-line dashed :customStyle="{ 'margin': '32rpx 0 30rpx' }"></uv-line> -->
      <view class="goods-box">
        <goodsWaterfall :storeId="storeId" />
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  background: url("https://leshi-oss.oss-cn-qingdao.aliyuncs.com/a5207c43-a7ac-4457-a04f-4df4dc973c9e.png")
    no-repeat;
  background-size: 100% 310px;
  position: relative;
  padding: 40rpx 0 0 0;

  .user {
    font-size: 28rpx;
    color: #ffffff;

    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    padding: 0 30rpx 20rpx;

    .avatar {
      width: 128rpx;
      height: 128rpx;
      border-radius: 50%;
      background-color: #ffffff;
      flex-shrink: 0;

      image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
      }
    }

    .user-right {
      width: 100%;
      padding: 0 0 0 8px;
    }

    .store {
      margin-top: 10rpx;

      image {
        width: 35rpx;
        height: 35rpx;
        margin-right: 14rpx;
      }
    }

    .user-info {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      .nikename {
        font-weight: 500;
        font-size: 40rpx;
        color: #ffffff;
        display: flex;
        align-items: center;
      }
    }

    .userinfo-feature {
      display: flex;
      width: 150rpx;
      justify-content: space-between;

      .follow {
        background: linear-gradient(180deg, #ffe8e8 0%, #ffd0d0 100%);
        border-radius: 30rpx;
        width: 120rpx;
        height: 60rpx;
        font-size: 28rpx;
        font-weight: 600;
        font-size: 28rpx;
        color: #c7452f;
        border: 2rpx solid #fde2e2;
      }
    }

    image {
      width: 128rpx;
      height: 128rpx;
    }
  }

  .main {
    box-sizing: border-box;
    background-color: #ececec;
    width: 100%;
    height: 100%;
    padding: 30rpx 24rpx;
    border-radius: 30rpx;

    .main-top {
      width: 100%;
      font-size: 28rpx;
      display: flex;
      justify-content: space-between;

      text {
        margin-right: 10rpx;
      }

      .feature {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #bebebe;
      }

      .number {
        font-size: 32rpx;
        font-weight: 700;
        color: #000000;
      }

      .wordart {
        font-size: 36rpx;
        font-weight: 700;
        color: #328cfe;
        font-style: italic;
        text-shadow: 1px 2px 1px #3cddc9;
        mix-blend-mode: multiply;
      }
    }

    .signature {
      display: flex;
      font-size: 25rpx;
      margin: 24rpx 0 26rpx;
      color: #9a9a9a;
    }

    .tags {
      display: flex;
      flex-wrap: wrap;

      .tag {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 5rpx;
        width: auto;
        margin-right: 20rpx;
        margin: 2px 2px;
        padding: 5rpx 10rpx;
        color: rgba(154, 154, 154, 1);
        font-size: 24rpx;
        text-align: center;
      }

      image {
        width: 25rpx;
        height: 25rpx;
        margin-bottom: rpx;
      }
    }
  }

  .rule {
    padding: 30rpx;
  }

  .head {
    color: #d92d20;
    font-weight: 600;
    margin: 30rpx;

    .line1 {
      width: 0;
      height: 0;
      border: 2px solid transparent;
      border-right: 150rpx solid #e73503;
    }

    .line2 {
      width: 0;
      height: 0;
      border: 2px solid transparent;
      border-left: 150rpx solid #e73503;
    }

    .title {
      margin: 0 20rpx;
    }
  }

  .content {
    font-size: 28rpx;
  }

  .validate {
    padding: 40rpx;

    .icon {
      margin-bottom: 20rpx;
      width: 114rpx;
      height: 114rpx;
      border-radius: 50%;
      background-color: #fef3f2;

      .icon2 {
        width: 81rpx;
        height: 81rpx;
        border-radius: 50%;
        background-color: #fee4e2;
      }

      image {
        width: 48rpx;
        height: 48rpx;
      }
    }

    .title {
      font-size: 32rpx;
      font-weight: 700;
      margin-bottom: 20rpx;
    }

    .content {
      color: #6c6c6c;
      font-size: 28rpx;
    }
  }
}

.map-fills-text {
  margin-left: 10rpx;
}

.vip-lv {
  padding: 0 20rpx 0 8rpx;
  height: 40rpx;
  background: url("@/static/images/vipbg@2x.png") no-repeat center;
  background-size: cover;
  margin-left: 18rpx;
  display: flex;
  align-items: center;
  border-radius: 0rpx 6rpx 6rpx 16rpx;

  .lvicon {
    width: 34rpx;
    height: 34rpx;

    image {
      width: 100%;
      height: 100%;
      vertical-align: top;
    }
  }

  .viplvtext {
    font-size: 24rpx;
    color: #941c0d;
    font-weight: bold;
    margin-left: 10rpx;
    white-space: nowrap;
  }
}

.personaldec {
  font-weight: 500;
  font-size: 24rpx;
  color: #ffffff;
  padding: 0 30rpx 20rpx;
}

.lines {
  margin: 25rpx 30rpx 30rpx 30rpx;
  height: 1px;
  background: rgba(255, 255, 255, 0.49);
}

.tag-wrap {
  margin: 25rpx 30rpx 30rpx 30rpx;
  display: flex;
}

.tag-btn {
  flex: 1;
  background: linear-gradient(180deg, #ffffff 0%, #ffe5e5 100%);
  box-shadow: 0rpx 4rpx 15rpx 0rpx rgba(127, 27, 9, 0.2);
  border-radius: 24rpx;
  font-weight: 400;
  font-size: 22rpx;
  color: #b81a06;
  padding: 13rpx;
  margin-right: 16rpx;
  text-align: center;
}

.tag-btn:last-child {
  margin-right: 0;
}
</style>
